<template>
  <div class="book-mark-box">
    <div class="left-box">
      <div class="top">
        <img src="../assets/images/a.jpg" alt="">
      </div>
      <div class="middle">
        <Nav :currentIndex="state.currentIndex"
                 :navList="state.markData" @selectItem="selectItem"/>
      </div>
    </div>
    <div class="right-box">
      <div class="top">
        <Search/>
      </div>
      <div class="middle">
        <MarkList :markList="markList" />
      </div>
    </div>
  </div>
</template>

<script setup>

import Nav from 'components/Nav/index.vue'
import Search from 'components/Search/index.vue'
import MarkList from 'components/MarkList/index.vue'
import { computed, reactive, watch } from 'vue'
import { initData } from 'configs/localData.js'

const state = reactive({
  // 书签数据
  markData: JSON.parse(localStorage.getItem('markData')) || initData,
  // 当前标签索引
  currentIndex: 0
})

// 计算属性， 获取当前标签下的所有书签
const markList = computed( () => state.markData[state.currentIndex]?.marks || [])

// 监听state属性， 将数据存入localStorage
watch(
    () => state,
    () => {
      localStorage.setItem('markData', JSON.stringify(state.markData))
    },
    {immediate: true, deep: true}
)

const selectItem = (index) => {
  state.currentIndex = index
}

</script>

<style lang="scss" scoped>
.book-mark-box {
  position: absolute;
  top: 10vh;
  left: 50%;
  transform: translateX(-50%);
  height: 80vh;
  width: 80%;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  display: flex;
  .left-box {
    height: 100%;
    width: 20%;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    .top {
      width: 100%;
      height: 150px;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 80%;
      }
    }
    .middle {
      max-height: calc(100% - 150px);
      overflow: auto;
      &::-webkit-scrollbar {
        display: none;
      }
    }
  }
  .right-box {
    width: 80%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    .top {
      height: 13%;
      width: 100%;
    }
    .middle {
      height: 87%;
      overflow: auto;
      &::-webkit-scrollbar {
        display: none;
      }
    }
  }
}
</style>
